<template>
	<view>
		<u-navbar :title="title">
			<view class="navbar-right" slot="right">
				<u-button size="mini" type="success" :disabled="isDisable" @click="saveInfo">保存</u-button>
			</view>
		</u-navbar>
		<u-picker v-model="show" :mode="pickerMode" @confirm='pickerComfirm'></u-picker>
		<view class="contentArea">
			<!-- 			<view v-if="(contentType=='name')||(contentType=='phone')||(contentType=='email')||(contentType=='address')"
				class=""> -->
			<view>
				<u-input v-model="value" :type="type" :border="border" @input="inputFunc" :placeholder="placeholder" :disabled="inputDisable" />
			</view>
			<view class="btnArea">
				
			<u-button size="medium" :ripple="true" @click="showPicker">点击修改</u-button>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				infoSubmit: {
					realName: undefined,
					address: undefined,
					phone: undefined,
					email: undefined,
					userBir: undefined
				},
				contentType: '',
				title: '',
				value: '',
				placeholder: '请输入内容',
				type: 'text',
				passwordIcon: true,
				border: true,
				isDisable: true,
				inputDisable: false,
				show:false,
				pickerMode:'time'
			}
		},
		methods: {
			saveInfo() {
				var that = this
				switch (this.contentType) {
					case 'name':
						this.infoSubmit.realName = this.value
						break;
					case 'phone':
						var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
						if (!myreg.test(this.value)) {
							that.$refs.uToast.show({
								title: '请输入正确的手机号码',
								type: 'error',
							})
							return false
						} else {
							this.infoSubmit.phone = this.value
						}
						break;
					case 'email':
						if (!this.value.match(/^\w+([._-]\w+)*@(\w+\.)+\w+$/)) {
							that.$refs.uToast.show({
								title: '请输入正确的电子邮箱',
								type: 'error',
							})
							return false;
						}
						this.infoSubmit.email = this.value
						break;
					case 'address':
						this.infoSubmit.address = this.value
						break;
					case 'birthday':
						// if (!this.value.match(/^\w+([._-]\w+)*@(\w+\.)+\w+$/)) {
						// 	that.$refs.uToast.show({
						// 		title: '请按照正确的格式输入生日',
						// 		type: 'error',
						// 	})
						// 	return false;
						// }
						this.infoSubmit.userBir = this.value
						break;
					default:
						// 默认代码块
				}
				this.$api.saveInfo(this.infoSubmit)
					.then(res => {
						console.log('完成修改', res)
						this.$u.route({
							type: 'navigateBack',
							delta: 1
						})
						// this.$forceUpdate()
					})
				// }
			},
			inputFunc() {
				this.isDisable = false
			},
			showPicker(){
				this.show = true
			},
			pickerComfirm(e){
				console.log(e);
				this.isDisable = false
				this.value = e.year + '-' + e.month +'-' + e.day
				console.log(this.value);
			}
		},
		watch: {
			contentType(newVal, oldVal) {
				switch (newVal) {
					case 'name':
						this.title = '更改姓名'
						this.type = 'text'
						this.placeholder = '请输入姓名'
						this.value = this.userInfo.realName
						break;
					case 'phone':
						this.title = '更改手机号'
						this.type = 'number'
						this.placeholder = '请输入手机号'
						this.value = this.userInfo.phone
						break;
					case 'email':
						this.title = '更改邮箱'
						this.type = 'text'
						this.placeholder = '请输入邮箱'
						this.value = this.userInfo.email
						break;
					case 'address':
						this.title = '更改地址'
						this.type = 'text'
						this.placeholder = '请输入地址'
						this.value = this.userInfo.address
						break;
					case 'birthday':
						this.title = '更改生日'
						this.type = 'text'
						this.placeholder = '请输入您的生日，格式：2000-01-01'
						this.inputDisable = true
						this.pickerMode = 'time'
						this.value = this.userInfo.birthdate
						break;
					default:
						// 默认代码块
				}
			},
		},
		onLoad(options) {
			// 页面跳转 传递对象 传对象
			this.userInfo = JSON.parse(options.userInfo)
			this.contentType = options.type
			console.log("用户信息：", this.userInfo);

		}
	}
</script>

<style>
	.slot-wrap {
		display: flex;
		flex: 1;
		/* justify-content: flex-end; */
	}

	.navbar-right {
		margin-right: 30rpx;
		display: flex;
	}

	.contentArea {
		margin-top: 20rpx;
		padding: 30rpx;
	}
	.btnArea{
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
	}
</style>
